import Ledger from '../index'
import './index.less'
import { Form, DatePicker, Table, Select, Typography } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import { ColumnsType } from 'antd/es/table';
import { useEffect, useState } from 'react';
import { getProject } from '../../../../services/statement/index'
const { Text } = Typography;
interface DataType {
    key: string;
    idName: number,
    cusId: number,
    balanceDirection: number,
    initialBalance: number,
    initialBalanceDebit: number,
    initialBalanceCredit: number,
    currentAmountDebit: number,
    currentAmountCredit: number,
    annualAmountDebit: number,
    annualAmountCredit: number,
    finalBalance: number
}
const columns: ColumnsType<DataType> = [
    {
        title: '供应商名称',
        dataIndex: 'idName',
        key: 'idName',
        width: 100,
        fixed: 'left',
        align: 'center',
        render: (text, record: any) => {
            return (
                <div>
                    <a style={{ fontWeight: record.key == '5' ? 'bold' : '', color: record.key == '5' ? 'black' : '' }}>{text}</a>
                </div>
            )
        },
    },
    {
        title: '期初余额',
        children: [
            {
                title: '借方',
                dataIndex: 'initialBalanceDebit',
                key: 'initialBalanceDebit',
                width: 100,
                align: 'center'

            },
            {
                title: '贷方',
                dataIndex: 'initialBalanceCredit',
                key: 'initialBalanceCredit',
                width: 100,
                align: 'center'

            },
        ],
    },
    {
        title: '本期发生额',
        children: [
            {
                title: '借方',
                dataIndex: 'currentAmountDebit',
                key: 'currentAmountDebit',
                width: 100,
                align: 'center'
            },
            {
                title: '贷方',
                dataIndex: 'currentAmountCredit',
                key: 'currentAmountCredit',
                width: 100,
                align: 'center'
            },
        ],
    },
    {
        title: '本年累计发生额',
        children: [
            {
                title: '借方',
                dataIndex: 'annualAmountDebit',
                key: 'annualAmountDebit',
                width: 100,
                align: 'center'
            },
            {
                title: '贷方',
                dataIndex: 'annualAmountCredit',
                key: 'annualAmountCredit',
                width: 100,
                align: 'center'
            },
        ],
    },
    {
        title: '期末余额',
        children: [
            {
                title: '借方',
                dataIndex: 'finalBalance',
                key: 'finalBalance',
                width: 100,
                align: 'center',
                render: (text, record) => {
                    if (record.balanceDirection == 1) {
                        return (
                            <div>
                                <span>{text}</span>
                            </div>
                        )
                    } else {
                        return null
                    }

                }

            },
            {
                title: '贷方',
                dataIndex: 'finalBalance',
                key: 'finalBalance',
                width: 100,
                align: 'center',
                render: (text, record) => {
                    if (record.balanceDirection == 2) {
                        return (
                            <div>
                                <span>{text}</span>
                            </div>
                        )
                    } else {
                        return null
                    }

                }

            },
        ],
    },
];
function Projbalance() {
    //分页
    let page = 1;
    let count=5;
    const [total, setTotal] = useState(0)
    const pageChange = (v:any) => {
        page = v
        setDataProj();
    }
    //表格数据渲染
    const [data, setData] = useState([]);
    useEffect(() => {
        setDataProj();
    }, [])
    const setDataProj = () => {
        getProject(
            {
                endDate: "2023-10-13T01:56:47.572Z",
                pageNo: page,
                pageSize: count,
                startDate: "2023-10-13T01:56:47.572Z"
            }
        ).then(({ data }) => {
            let _data = data.list.map((v: any) => {
                return { ...v, key: v.cusId }
            })
            setData(_data);
            setTotal(data.total)
        })
    }
    const [selectedValue, setSelectedValue] = useState('male');
    const { RangePicker } = DatePicker;
    const { Option } = Select;
    const onFinish = (values: any) => {
        console.log(values);
    };
    const onChange = (e: CheckboxChangeEvent) => {
        console.log(`checked = ${e.target.checked}`);
    };
    //选择框
    const options = [
        { value: 'male', sel: 'Male' },
        { value: 'female', sel: 'Female' },
        { value: 'other', sel: 'Other' },
    ];
    return (
        <div className='finall'>
            <Ledger header='财务总账'></Ledger>
            <div className='center'>
                <Form
                    name="customized_form_controls"
                    layout="inline"
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="记账时间："
                        name="date"
                        style={{ marginLeft: '60px' }}
                    >
                        <RangePicker style={{ width: 215 }} />
                    </Form.Item>
                    <Form.Item
                        label="科目："
                        name="subone"
                    >
                        <Select
                            placeholder="科目筛选"
                            allowClear
                            style={{ width: 140 }}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                            <Option value="other">other</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="至"
                        name="subtwo"
                    >
                        <Select
                            placeholder="科目筛选"
                            allowClear
                            style={{ width: 140 }}
                        >
                            <Option value="male">male</Option>
                            <Option value="female">female</Option>
                            <Option value="other">other</Option>
                        </Select>
                    </Form.Item>
                    <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }} onClick={onFinish}>搜素</button>
                </Form>
                <Form>
                    <button style={{ width: '60px', height: '35px', marginRight: 20, border: 'none', background: '#22AB82', color: 'white' }}>导出</button>
                    <button style={{ width: '60px', height: '35px', border: 'none', background: '#22AB82', color: 'white' }}>打印</button>
                </Form>
            </div>
            <Table columns={columns} dataSource={data} bordered style={{ marginLeft: '60px' }}
                pagination={{ defaultPageSize: 5, total: total, onChange: pageChange }}
                summary={(data) => {
                    let initialDebit = 0;
                    let initialCredit = 0;
                    let currentDebit = 0;
                    let currentCredit = 0;
                    let annualDebit = 0;
                    let annualCredit = 0;
                    let finalBalance1 = 0;
                    let finalBalance2 = 0;

                    data.forEach(({ initialBalanceDebit, initialBalanceCredit, currentAmountDebit,
                        currentAmountCredit, annualAmountDebit, annualAmountCredit, finalBalance, balanceDirection }) => {
                        initialDebit += initialBalanceDebit
                        initialCredit += initialBalanceCredit
                        currentDebit += currentAmountDebit
                        currentCredit += currentAmountCredit
                        annualDebit += annualAmountDebit
                        annualCredit += annualAmountCredit
                        if (balanceDirection == 1) {
                            finalBalance1 += finalBalance
                        }
                        if (balanceDirection == 2) {
                            finalBalance2 += finalBalance
                        }
                    })
                    return (<>
                        <Table.Summary.Row>
                            <Table.Summary.Cell colSpan={1} index={0} className="total-cell">总计:</Table.Summary.Cell>
                            <Table.Summary.Cell index={1} colSpan={1}>
                                <Text>{initialDebit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{initialCredit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{currentDebit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{currentCredit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{annualDebit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{annualCredit}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{finalBalance1}</Text>
                            </Table.Summary.Cell>
                            <Table.Summary.Cell colSpan={1} index={1}>
                                <Text>{finalBalance2}</Text>
                            </Table.Summary.Cell>
                        </Table.Summary.Row>
                    </>
                    )
                }}
            />
            <span className='footer'>当前合计，共3条记录</span>
            <div>
                <div className='addfooter'>@2014-2023 财务出纳管理系统</div>
            </div>
        </div>
    )
}
export default Projbalance